import React from 'react';
import { Row, Col } from 'antd';
import { Input } from 'antd';
import { DatePicker, Space } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
const { RangePicker } = DatePicker;
import { Table } from 'antd';
const { Option } = Select;
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import { Transfer } from 'antd';
import request from '../../../http';

/*React.useEffect(() => {
  const parms = {
    account: 1,
  };

  request
    .post('/courseManage/Query/course/project/information', parms)
    .then((result: any) => {
      const data = result.map((item: any) => ({
        key: `p_${item.id}`,
        cname: item.cname,
        pgname: item.pgname,
        sname: item.sname,
        role: item.role,
        isleader: item.isleader === 0 ? '是' : '否',
        sch: item.sch,
        lch: item.lch,
        ssh: item.ssh,
        tel: item.tel,
      }));
      //实训小组成员列表
      setData2(data);
    });

  const [data4, setData2] = React.useState();
}, []);
*/
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const columns = [
  {
    title: '日期',
    width: 100,
    dataIndex: 'rq',
    key: 'rq',
    fixed: 'left',
  },
  {
    title: '项目名称',
    width: 100,
    dataIndex: 'xmmc',
    key: 'xmmc',
    fixed: 'left',
  },
  {
    title: '实训老师',
    dataIndex: 'sxls',
    key: '1',
    width: 150,
  },
  {
    title: '责任老师',
    dataIndex: 'zrls',
    key: '2',
    width: 150,
  },
  {
    title: '签到时间',
    dataIndex: 'qdsj',
    key: '3',
    width: 150,
  },
  {
    title: '签退时间',
    dataIndex: 'qtsj',
    key: '4',
    width: 150,
  },
  {
    title: '教室',
    dataIndex: 'js',
    key: '5',
    width: 150,
  },
  {
    title: '备注',
    dataIndex: 'bz',
    key: '6',
    width: 150,
  },
];

const data: any = [];
for (let i = 0; i < 100; i++) {
  data.push({
    rq: i,
    xmmc: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

const Course = () => {
  //封装界面公共的接口方法
  const loadDataSource = (parms: any) => {
    //遍历班级接口
    request
      .post('/courseManage/Query/course/project/information', parms)
      .then((result: any) => {
        console.log(result);

        const data4 = result.data.returnDate.map((item: any) => ({
          key: `p_${item.id}`,
          rq: item.applyDateTime,
          xmmc: item.name,
          sxls: item.trainingTeachersName,
          zrls: item.responsibilityName,
          qdsj: item.sign,
          qtsj: item.outSign,
          js: item.classRoom,
          bz: item.remarks,
        }));

        //获取分页请求的数据
        const newPageObject = {
          ...pagination,
          current: parms.page,
          pageSize: parms.number,
          total: result.data.paginationData.sum,
        };

        //放分页的数据
        setPagination(newPageObject);
        //放教师信息的数据
        setData2(data4);
      })
      .catch((err) => console.log(err));
  };

  //初始化分页
  const [pagination, setPagination] = React.useState({
    current: 1, //当前页码
    total: 1, //页码总数
    pageSize: 10, //一页多少条数据
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });

  //改变页码，页码条数接口的事件
  //绑分页接口
  const pageOnChange = (page: any) => {
    const parms = {
      //请求参数
      number: page.pageSize, //一页10行
      page: page.current, //第一页
    };
    //调接口
    //01课程管理遍历查询课程接口
    request.post('/courseManage/Query/course/project/information', parms).then(
      (result: any) => {
        console.log(result);
        // 判断响应状态
        if (result.success) {
          //获得成功响应返回的数据
          console.log(result.data);

          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
            rq: item.applyDateTime,
            xmmc: item.name,
            sxls: item.trainingTeachersName,
            zrls: item.responsibilityName,
            qdsj: item.sign,
            qtsj: item.outSign,
            js: item.classRoom,
            bz: item.remarks,
          }));

          //获取分页请求的数据
          const newPageObject = {
            ...pagination,
            current: parms.page,
            pageSize: parms.number,
            total: result.data.paginationData.sum,
          };

          //放分页的数据
          setPagination(newPageObject);

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  };

  React.useEffect(() => {
    const parms: any = {
      //account: 1,
      //number: 10, //一页10行
      //page: 1, //第一页
      number: pagination.pageSize, //一页10行
      page: pagination.current, //第一页
    };
    //遍历班级接口
    request.post('/courseManage/Query/course/project/information', parms).then(
      (result: any) => {
        console.log(result);
        // 这里是响应成功返回的数据，把上面的response打印出来的时候，就会得到以下结果
        // config: {url: "请求的地址"}，这是一个配置文件
        // headers: 请求头信息
        // data: (100) 返回响应的数据
        // request: ajax相关的请求信息
        // status: 200；响应状态
        // statusText: "OK"
        // 判断响应状态
        if (result.success) {
          //获得成功响应返回的数据
          console.log(result.data);

          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
            rq: item.applyDateTime,
            xmmc: item.name,
            sxls: item.trainingTeachersName,
            zrls: item.responsibilityName,
            qdsj: item.sign,
            qtsj: item.outSign,
            js: item.classRoom,
            bz: item.remarks,
          }));

          //获取分页请求的数据
          const newPageObject = {
            ...pagination,
            current: parms.page,
            pageSize: parms.number,
            total: result.data.paginationData.sum,
          };

          //放分页的数据
          setPagination(newPageObject);

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //12课程管理 责任老师下拉框地址 缺请求参数
    // request
    // .post('/common/a_s/queryResponsibilityName', parms)
    // .then(
    //   (result: any) => {
    //     console.log("课程管理，责任老师下拉框地址result数据",result);
    //     if (result.success) {
    //       //获得成功响应返回的数据
    //       console.log("课程管理，责任老师下拉框地址result.data数据",result.data);

    //       setZrls(result.data);
    //     }
    //   },
    //   (error) => {
    //     //错误返回错误信息
    //     console.log('请求错误');
    //   },
    // );
    //13课程管理 实训老师下拉框地址 缺请求参数
    // request
    // .post('/common/a_s/queryTrainingTeacherNames', parms)
    // .then(
    //   (result: any) => {
    //     console.log("课程管理，实训老师下拉框地址result数据",result);
    //     if (result.success) {
    //       //获得成功响应返回的数据
    //       console.log("课程管理，实训老师下拉框地址result.data数据",result.data);

    //       setSxls(result.data);
    //     }
    //   },
    //   (error) => {
    //     //错误返回错误信息
    //     console.log('请求错误');
    //   },
    // );
    //14课程管理 项目名称下拉框地址 缺请求参数
    // request
    // .post('/common/a_t_s/queryCourseName', parms)
    // .then(
    //   (result: any) => {
    //     console.log("课程管理，项目名称下拉框地址result数据",result);
    //     if (result.success) {
    //       //获得成功响应返回的数据
    //       console.log("课程管理，项目名称下拉框地址result.data数据",result.data);
    //       setXmmc(result.data);
    //     }
    //   },
    //   (error) => {
    //     //错误返回错误信息
    //     console.log('请求错误');
    //   },
    // );
    {
      /*
    //02课程管理 新增按钮接口 缺请求参数
    request
    .post('/courseManage/admin/add/course/project/information', parms)
    .then(
      (result: any) => {
        console.log("课程管理，新增按钮接口result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，新增按钮接口result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
           
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //03课程管理 选择学生超链接 缺请求参数
    request
    .post('/courseManage/admin/insert/students', parms)
    .then(
      (result: any) => {
        console.log("课程管理，选择学生超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，选择学生超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
            
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //04课程管理 编辑超链接 缺请求参数
    request
    .post('/courseManage/admin/Query/update/course/project/information', parms)
    .then(
      (result: any) => {
        console.log("课程管理，编辑超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，编辑超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //05课程管理 删除超链接 缺请求参数
    request
    .post('/courseManage/admin/delete/course/project/information', parms)
    .then(
      (result: any) => {
        console.log("课程管理，删除超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，删除超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //06课程管理 复制超链接 缺请求参数
    request
    .post('/courseManage/admin/clone/course/project/information', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    
    //07课程管理 管理员点击选择学生后，再点击选择分组的请求地址 缺请求参数
    request
    .post('/courseManage/admin/query/all/groups', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );


    //08课程管理 管理员点击选择学生后，再点击选择学生的请求地址 缺请求参数
    request
    .post('/courseManage/admin/query/group/in/all/students', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    
    //09课程管理 管理员确认修改课程的请求地址 缺请求参数
    request
    .post('/courseManage/admin/update/course/project/information', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    //11课程管理 教师点击查看学生的请求地址 缺请求参数
    request
    .post('/courseManage/teacher/queryStudents', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    //12课程管理 责任老师下拉框地址 缺请求参数
    request
    .post('/common/a_s/queryResponsibilityName', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    //13课程管理 实训老师下拉框地址 缺请求参数
    request
    .post('/common/a_s/queryTrainingTeacherNames', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    //14课程管理 项目名称下拉框地址 缺请求参数
    request
    .post('/common/a_t_s/queryCourseName', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );*/
    }
  }, []);

  const [data4, setData2] = React.useState();
  //下拉框
  const [Zrls, setZrls] = React.useState([{}]);
  const [Sxls, setSxls] = React.useState([{}]);
  const [Xmmc, setXmmc] = React.useState([{}]);

  //获取表单的数据 查询
  const onSubmit = (value: any) => {
    //获取学生
    console.log('查询表单数据', value);
    const parms = {
      ...value,
      //请求参数
      number: pagination.pageSize, //一页10行
      page: pagination.current, //第一页
    };

    //01课程管理遍历查询课程接口
    request.post('/courseManage/Query/course/project/information', parms).then(
      (result: any) => {
        console.log(result);
        // 判断响应状态
        if (result.success) {
          //获得成功响应返回的数据
          console.log(result.data);

          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
            rq: item.applyDateTime,
            xmmc: item.name,
            sxls: item.trainingTeachersName,
            zrls: item.responsibilityName,
            qdsj: item.sign,
            qtsj: item.outSign,
            js: item.classRoom,
            bz: item.remarks,
          }));

          //获取分页请求的数据
          const newPageObject = {
            ...pagination,
            current: parms.page,
            pageSize: parms.number,
            total: result.data.paginationData.sum,
          };

          //放分页的数据
          setPagination(newPageObject);
          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  };

  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  const [form] = Form.useForm();
  const onGenderChange = (value: string) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'Hi, man!' });
        return;
      case 'female':
        form.setFieldsValue({ note: 'Hi, lady!' });
        return;
      case 'other':
        form.setFieldsValue({ note: 'Hi there!' });
    }
  };
  return (
    <div>
      <Form onFinish={onSubmit} {...formItemLayout}>
        <div>
          <div style={{ marginLeft: '8px', float: 'left', width: '300px' }}>
            <Form.Item name="applyDateTime" label="日期：">
              <DatePicker />
            </Form.Item>
            <Form.Item name="name" label="项目名称：">
              <Select placeholder="请选择" allowClear>
                {Xmmc.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="trainingTeachersName" label="实训老师：">
              <Select placeholder="请选择" allowClear>
                {Sxls.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="responsibilityName" label="责任老师：">
              <Select placeholder="请选择" allowClear>
                {/* {Zrls.map((cNameObj: any) => {
                        return (
                          <Option key={cNameObj.id} value={cNameObj.id}>
                            {cNameObj.format}
                          </Option>
                        );
                      })} */}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
            <Form.Item {...tailLayout}>
              <div style={{ float: 'left', width: '50px', marginLeft: '10px' }}>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
              </div>
            </Form.Item>
          </div>
          <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
            <Form.Item {...tailLayout}>
              <div style={{ float: 'left', width: '50px', marginLeft: '30px' }}>
                <Button type="default" htmlType="submit">
                  重置
                </Button>
              </div>
            </Form.Item>
          </div>
        </div>
      </Form>
      <div>
        <Table
          columns={columns}
          dataSource={data4}
          /*分页组件*/
          pagination={pagination}
          onChange={pageOnChange}
          scroll={{ x: 1500, y: 300 }}
        />
      </div>
    </div>
  );
};
export default Course;
